<template>
  <div class="user-container">
    <!-- 顶部区域 -->
<div class="info-box">
<van-image
  round
  width="64"
  height="64"
   fit="cover"
  src="https://img01.yzcdn.cn/vant/cat.jpeg"
/>
 <h2 class="name">
    黑马李宗盛
    <br />
    <van-tag type="primary" color="#fff" text-color="#3296fa"
      >2021-6-23</van-tag
    >
  </h2>
</div>

<!-- 操作导航 -->
<van-row class="user-nav">
  <van-col span="8">
    <van-icon name="newspaper-o" color="#7af" />我的作品
  </van-col>
  <van-col span="8">
    <van-icon name="star-o" color="#f00" />我的收藏
  </van-col>
  <van-col span="8">
    <van-icon name="tosend" color="#fa0" />阅读历史
  </van-col>
</van-row>

<!-- 编辑cell -->
<van-cell-group class="user-group">
  <van-cell icon="edit" title="编辑资料" is-link />
  <van-cell icon="chat-o" title="小智同学" is-link />
  <van-cell icon="setting-o" title="系统设置" is-link />
  <van-cell icon="warning-o" title="退出登录" is-link />
</van-cell-group>

  </div>
</template>

<script>
export default {
name:'user',
}
</script>

<style lang="less">
.user-container{
// 头部
.info-box{
  height: 100px;
  background-color: #3296fa;
  display: flex;
  align-items: center;
  padding-left: 15px;
  .name{
    font-size: 18px;
    margin-left: 15px;
    color: #fff;
    font-weight: normal;
  }
}
.user-nav{
  padding: 15px 0;
  font-size: 12px;
  text-align: center;
  background-color: #fff;
  .van-icon{
    display: block;
    font-size: 24px;
    padding-bottom: 5px;
  }
}
}
</style>
